<template>
  <div>
	<div class="title">热销推荐</div>
	<ul>
		<router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/'+ item.id">
				<img class="item-img" :src="item.imgUrl" />
			<div class="item-info">
				<p class="item-title">{{item.title}}</p>
				<p class="item-desc">{{item.desc}}</p>
				<button class="item-button">查看详情</button>
			</div>
		</router-link>
		
	</ul>
  </div>
</template>
<script>
export default{
	name: "Recommend",
	props:{
		list:Array
	}
}
</script>
<style lang="stylus" scoped>
	@import '~styles/mixins.styl'
	.title
		line-height: .8rem
		background: #eee
		text-indent: .2rem
	.item
		display flex
		height: 1.9rem
		.item-img
			width: 1.7rem
			height: 1.7rem
			padding: .1rem
		.item-info
			flex: 1//会自动撑开
			padding: .1rem
			min-width: 0
			.item-title
				line-height: .54rem
				font-size: .32rem
				ellipsis()
			.item-desc
				line-height: .4rem
				color: #ccc
			.item-button
				line-height: .44rem
				margin-top: .16rem 
				background: #ff9300
				padding: 0 .1rem
				border-radius: .06rem
				color:#fff
				ellipsis()
</style>
